<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物网站</title>
    <link rel="stylesheet" href="css/home.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<header>
    <div class="logo">
        <img src="img/logo.png" alt="购物网站标志">
    </div>
    <div class="search-bar">
        <input type="text" id="searchInput" placeholder="搜索产品...">
        <button onclick="searchProducts($('#searchInput').val())">搜索</button>
    </div>

    <div class="user-info">
        <a href="login.html" class="login">登陆</a>
        <a href="register.html" class="register">注册</a>
        <a href="mine.html" class="profile" style="display:none;">个人主页</a>
        <a href="shoppingcart.html" class="cart" style="display:none;">购物车</a>
        <a href="javascript:logout()" class="logout" style="display:none;">退出登录</a>
    </div>
</header>

<nav>
    <ul>
        <li><a href="#">首页</a></li>
    </ul>
    <section class="filters">
        <div class="filter-option" id="brandFilter">
            <span class="filter-title">品牌：</span>
            <span class="filter-item" data-value="">所有品牌</span>
            <span class="filter-item" data-value="苹果">苹果</span>
            <span class="filter-item" data-value="华为">华为</span>
            <span class="filter-item" data-value="小米">小米</span>
            <!-- 更多品牌 -->
        </div>

        <div class="filter-option" id="priceFilter">
            <span class="filter-title">价格：</span>
            <span class="filter-item" data-value="0 9999999">所有价格</span>
            <span class="filter-item" data-value="1 2000">0-2000元</span>
            <span class="filter-item" data-value="2000 4000">2000-4000元</span>
            <span class="filter-item" data-value="4000 6000">4000-6000元</span>
            <span class="filter-item" data-value="6000 99999">6000+元</span>
            <!-- 更多价格区间 -->
        </div>
    </section>
</nav>

<main>
    <div class="product-list"></div>
</main>

<footer>
    <p>&copy; 我的购物网站 。</p>
</footer>
</body>

<script>
    // 检查用户是否登录
    function checkLogin() {
        $.ajax({
            url: "/user/get-user",
            type: "get",
            success: function (result) {
                if (result.state == 200) {
                    // 用户已登录，显示相应的选项
                    $(".logout").show();
                    $(".cart").show();
                    $(".profile").show();
                    $(".login").hide();
                    $(".register").hide();
                } else {
                    // 用户未登录，显示登录和注册选项
                    $(".logout").hide();
                    $(".cart").hide();
                    $(".profile").hide();
                    $(".login").show();
                    $(".register").show();
                }
            },
            error: function (err) {
                if (err.status == 401) {
                    // 用户未登录，显示登录和注册选项
                    $(".logout").hide();
                    $(".cart").hide();
                    $(".profile").hide();
                    $(".login").show();
                    $(".register").show();
                }
            }
        });
    }
    checkLogin();

    // 通过 AJAX 请求获取所有产品数据
    function getAllProducts() {
        $.ajax({
            url: "/product/get-all",
            type: "post",
            dataType: "json",
            success: function (products) {
                if (products.data.length > 0) {
                    updateProductList(products);
                } else {
                    console.log(products.data);
                    alert("?，请重试");
                }
            },
            error: function () {
                alert("获取产品失败，请重试");
            }
        });
    }
    getAllProducts()

    function searchProducts(keyword) {
        $.ajax({
            url: "/product/search", // 假设有对应的搜索接口
            type: "post",
            data: {
                keyword: keyword
            },
            dataType: "json",
            success: function(products) {
                updateProductList(products);
            },
            error: function() {
                alert("搜索请求失败，请重试");
            }
        });
    }

    function productChoose(brand, priceRange) {
        let minPrice = 0;
        let maxPrice = 9999999;

        if (priceRange !== "") {
            const priceRangeArray = priceRange.split(' ');
            minPrice = Number(priceRangeArray[0]);
            maxPrice = Number(priceRangeArray[1]);
        }

        // 发起 AJAX 请求
        $.ajax({
            url: "/product/choose",
            type: "post",
            data: {
                brand: brand,
                minPrice: minPrice,
                maxPrice: maxPrice
            },
            dataType: "json",
            success: function (products) {
                updateProductList(products);
            },
            error: function () {
                alert("筛选请求失败，请重试");
            }
        });
    }

    // 更新产品列表
    function updateProductList(products) {
        const productListElement = document.querySelector('.product-list');
        productListElement.innerHTML = ''; // 清空当前的产品列表

        // 遍历产品数据
        products.data.forEach(product => {
            const productElement = document.createElement('div');
            productElement.className = 'product-item';
            productElement.innerHTML = `
            <a href="product-detail.html?id=${product.id}">
                <img src="${product.img}" alt="${product.name}">
            </a>
            <p class="price">￥${product.price}</p>
            <p>${product.details}</p>
        `;
            productListElement.appendChild(productElement);
        });
    }

    // 绑定筛选项点击事件
    $(document).ready(function () {
        // 处理品牌选择
        $('#brandFilter .filter-item').on('click', function () {
            const brand = $(this).data('value');
            const priceRange = $('#priceFilter .selected').data('value') || '';
            productChoose(brand, priceRange);

            // 高亮已选项
            $('#brandFilter .filter-item').removeClass('selected');
            $(this).addClass('selected');
        });

        // 处理价格选择
        $('#priceFilter .filter-item').on('click', function () {
            const priceRange = $(this).data('value');
            const brand = $('#brandFilter .selected').data('value') || '';
            productChoose(brand, priceRange);

            // 高亮已选项
            $('#priceFilter .filter-item').removeClass('selected');
            $(this).addClass('selected');
        });
    });



    function logout() {
        if (confirm("确认要退出登录？")) {
            // 发送AJAX请求退出登录
            $.ajax({
                url: "user/logout",
                type: "get",
                success: function (response) {
                    if (response.state === 200) {
                        alert("退出成功");
                        location.href = "home.html";
                    } else {
                        alert("当前未登陆，点击确认回到首页");
                        location.href = "home.html";
                    }
                },
                error: function () {
                    alert("抱歉，当前状态异常，请点击确认！");
                    location.assign('/home.html');
                }
            });
        }
    }
</script>
</html>
